<template>
  <div class="dashboard-container">
    <h2 class="head-big-title">Laporan/Analisis</h2>
    <el-date-picker
      v-model="dateTime"
      type="daterange"
      @change="loadData"
      align="right"
      unlink-panels
      format="yyyy-MM-dd"
      value-format="yyyy-MM-dd"
      range-separator="To"
      start-placeholder="start"
      end-placeholder="end">
    </el-date-picker>
    <el-card shadow="always" :body-style="{ padding: '12px 0 12px 20px' }" style="width: 92%;margin: 12px 4% 0 4%;border-radius: 10px;background-color: white;text-align: left;clear: both;">
      <h2>Jumlah Pesanan</h2>
      <h2 style="font-size: 21px;margin: 6px 0 0 0;color: #e2c439;">{{detailData.totalPOs}}</h2>
    </el-card>
    <el-card shadow="always" :body-style="{ padding: '12px 0 12px 20px' }" style="width: 92%;margin: 12px 4% 0 4%;border-radius: 10px;background-color: white;text-align: left;clear: both;">
      <h2>Jumlah Jualan (MYR)</h2>
      <h2 style="font-size: 21px;margin: 6px 0 0 0;color: #e2c439;">{{$formatMoneyStr(detailData.totalSales)}}</h2>
    </el-card>
    <h2 class="big-title">Jumlah Keuntungan</h2>
    <el-card shadow="always" :body-style="{ padding: '12px 0 12px 20px' }" style="width: 92%;margin: 12px 4% 0 4%;border-radius: 10px;background-color: white;text-align: left;clear: both;">
      <div id="orderChart1" style="width:100%;height:278px;"></div>
    </el-card>
    <el-table
      :data="masterDealerSalesData"
      style="width: 92%;margin: 20px 4% 0 4%;padding-left: 10px;border-radius: 20px;text-align: center;">
      <el-table-column prop="dealerName" label="10 Dealer Paling Tinggi" align="center"></el-table-column>
      <el-table-column label="Jumlah Jualan" align="center">
        <template slot-scope="scope">
          {{$formatMoneyStr(scope.row.totalSales)}}
        </template>
      </el-table-column>
    </el-table>
    <el-table
      :data="DealerData"
      style="width: 92%;margin: 20px 4% 0 4%;padding-left: 10px;border-radius: 20px;text-align: center;">
      <el-table-column prop="dealerName" label="Semua Dealer" align="center"></el-table-column>
      <el-table-column prop="totalSales" label="Semua Dealer" align="center">
        <template slot-scope="scope">
          {{$formatMoneyStr(scope.row.totalSales)}}
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        style="float: right;margin: 10px 30px 20px 0"
        :page-size="searchData.pageNum"
        :pager-count="5"
        @current-change="handleCurrentChange"
        :current-page="searchData.pageIndex"
        layout="prev, pager, next"
        :total="totalCount">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { masterDealerReportApi, salesMasterDealerReportApi } from '@/api/user'
import { getDateStr } from '@/utils/auth'

export default {
  name: 'Report',
  computed: {
    ...mapGetters([
      'name',
      'role'
    ])
  },
  data() {
    return {
      tableDataa: [],
      tableDatab: [],
      DealerData: [],
      xAxisList: [],
      masterDealerSalesData: [],
      totalCount: 0,
      MdealerId: '',
      settingList: {},
      dateTime: new Date(),
      searchData: {
        pageIndex: 1,
        pageNum: 15
      },
      detailData: {},
      orderChart1: ''
    }
  },
  mounted() {
    this.checkResetTime()
    this.loadData()
  },
  methods: {
    checkResetTime() {
      const now = new Date()
      let monthStr = now.getMonth() + 1
      let startTime = ''
      let endTime = ''
      endTime = now.getFullYear() + ((monthStr < 10) ? '-0' : '-') + monthStr + '-' + now.getDate()
      startTime = ''
      if (now.getDate() < 10) { // 10日前
        if (monthStr == 1) {
          startTime = (now.getFullYear() - 1) + '-12-1'
        } else {
          monthStr = monthStr - 1
          startTime = now.getFullYear() + ((monthStr < 10) ? '-0' : '-') + monthStr + '-1'
        }
      } else {
        startTime = now.getFullYear() + ((monthStr < 10) ? '-0' : '-') + monthStr + '-1'
      }
      this.dateTime = [startTime, endTime]
    },
    getTimeStrXis() {
      let xAxis = []
      let [startTime, endTime] = this.dateTime
      startTime = new Date(startTime).getTime()
      endTime = new Date(endTime).getTime()
      let dayNum = (endTime - startTime) / 1000 / 60 / 60 / 24
      dayNum = parseInt(dayNum)
      for (let i = 0; i < dayNum; i++) {
        xAxis.push(getDateStr(startTime))
        startTime = startTime + (1000 * 60 * 60 * 24)
      }
      this.xAxisList = xAxis
      // console.log('xAxis', xAxis)
    },
    getFormatChart(array) {
      let series = this.spliceMasterDealerData(array)
      return {
        title: {
          subtext: '', // 副标题
          x: 'left' // x轴方向对齐方式
        },
        tooltip: { trigger: 'axis' }, // axis   item   none三个值
        xAxis: {
          type: 'category',
          data: this.xAxisList, // x轴数据
          name: 'Day'
        },
        grid: {
          left: '3%',
          right: '3%', // 调整大小
          containLabel: true
        },
        yAxis: { type: 'value', name: 'Sales (MYR)' },
        legend: { orient: 'vertical', x: 'center', y: 'top', data: ['订单量'] },
        series: series
      }
    },
    spliceMasterDealerData(array) {
      let xAxisData = []
      if (array.length) {
        if (array.length > 0) {
          if (array.length > 0) {
            for (let i = 0; i < array.length; i++) {
              let newList = {
                name: array[i].dealerName,
                type: 'line',
                data: array[i].details
              }
              xAxisData.push(newList)
            }
          }
        }
      }
      return xAxisData
    },
    loadData() {
      this.orderChart1 = this.$echarts.init(document.getElementById('orderChart1'))
      this.orderChart1.showLoading()
      this.getTimeStrXis()
      const requestData = {
        startTime: this.dateTime[0],
        endTime: this.dateTime[1]
      }
      const MdealerId = localStorage.getItem('masterdealerId') ? localStorage.getItem('masterdealerId') : null
      if (MdealerId) {
        requestData.dealerId = MdealerId
      }
      masterDealerReportApi(requestData).then(res => {
        this.detailData = res.data
        this.masterDealerSalesData = res.data.masterDealerSales
        this.orderChart1.setOption(this.getFormatChart(res.data.masterDealerSales))
        this.orderChart1.hideLoading()
      }).catch(err => {
        console.log(err)
      })
      this.getMasterDealerData()
    }, // 得到数据表格
    handleCurrentChange(val) {
      this.searchData.pageIndex = val
      this.getMasterDealerData()
    },
    getMasterDealerData() {
      let requestData = this.searchData
      requestData.startTime = this.dateTime[0],
      requestData.endTime = this.dateTime[1]
      const MdealerId = localStorage.getItem('masterdealerId') ? localStorage.getItem('masterdealerId'):null
      if (MdealerId) {
        requestData.dealerId = MdealerId
      }
      salesMasterDealerReportApi(requestData).then(res => {
        this.DealerData = res.data.records
        this.totalCount = res.data.total
      }).catch(err => {
        console.log(err)
      })
    }
  }
}

</script>

<style lang="scss" scoped>
.dashboard {
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.head-big-title{
  text-align: left;
  font-size: 20px;
  margin: 20px 0 20px 3%;
}
.big-title{
  text-align: left;
  font-size: 19px;
  margin: 20px 0 20px 3%;
  clear: both;
}
.dashboard-container{
  margin-top: 20px;
  text-align: center;
}
.two-card + .two-card{
  margin-left: 30px;
}
.two-card{
  width: 300px;
  text-align: left;
  float: left;
  margin-bottom: 30px;

  .title{
    display: block;font-size: 15px;margin: 0;
  }
  .count{
    font-size: 19px;margin: 6px 0 0 0;color: #ffe140;
  }
}
  .last-days-order{
    width: 92%;
    margin: 0 4%;
    border-radius: 20px;
  }
  .last-days-order .erchart-div{
    height:278px;display: inline-block;background-color: white;border-radius: 10px;
  }
</style>
<style scoped>
  /deep/.el-table .el-table-column{
    padding: 5px 0;
  }
</style>
